<template>

  <view
    class="th-dialog"
    :class="[visible ? 'show' : '']"
    :style="{ top: align === 'left' ? barHeight + 'px' : '0px' }"
  >
  	<!--     @touchmove.stop.prevent="moveHandle" -->
    <view
      class="mask"
      :class="[visible ? 'active' : '', align]"
      :style="{ top: align === 'left' ? barHeight + 'px' : '0px' }"
      @click.stop="closeHandle"
    ></view>
    <view
      class="th-container"
      :class="[visible ? 'active' : '', align]"
      :style="{ width: width || '100%', top: ['left'].includes(align) ? barHeight + 'px' : '40%' }"
    >
      <view class="header" v-if="title">
        <view class="title">{{ title }}</view>
        <view class="close cuIcon-close" @click.stop="closeHandle"></view>
      </view>
      <scroll-view scroll-y class="body">
        <view style="height: 100%">
          <slot name="content"></slot>
        </view>
      </scroll-view>
      <view class="footer">
        <slot name="footer"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ThDialog',
  props: {
    visible: {
      type: Boolean,
    },
    title: {
      type: String,
    },
    align: {
      type: String,
      default: 'bottom',
    },
    width: {
      type: [String, Number],
      default: '100%',
    },
  },
  data() {
    return {
      barHeight: uni.getSystemInfoSync().statusBarHeight + 44 || 50,
    };
  },
  methods: {
    closeHandle() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    moveHandle() {},
  },
};
</script>

<style lang="scss" scoped>
.th-dialog {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  &.show {
    visibility: visible;
  }
  .mask {
    position: fixed;
    width: 100vw;
    bottom: 0;
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0);
    visibility: hidden;
    &.active.bottom,
    &.active.top,
    &.active.left {
      background: rgba(0, 0, 0, 0.3);
      visibility: visible;
    }
    &.active.middle {
      background: rgba(0, 0, 0, 0.3);
      visibility: visible;
    }
  }
  .th-container {
    position: fixed;
    transition: all 0.3s;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &.bottom {
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      transform: translateY(100%);
      &.active {
        transform: translateY(0);
        opacity: 1;
      }
    }
    &.middle {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0);
      overflow: hidden;
      border-radius: 10rpx;
      visibility: hidden;
      opacity: 0;
      &.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
      }
    }
    &.top {
      top: 0;
      left: 0;
      opacity: 0;
      transform: translateY(-100%);
      &.active {
        transform: translateY(0);
        opacity: 1;
      }
    }
    &.left {
      // top: 0;
      left: 0;
      bottom: 0;
      opacity: 0.3;
      box-sizing: border-box;
      transform: translateX(-100%);
      &.active {
        transform: translateX(0);
        opacity: 1;
      }
    }
    .header {
      display: flex;
      height: 80rpx;
      padding: 0 15rpx;
      justify-content: space-between;
      align-items: center;
      font-size: 34rpx;
      border-bottom: 1px solid #f1f1f1;
      .title {
        display: flex;
      }
      .close {
        position: relative;
        z-index: 999;
        padding: 10rpx;
      }
    }
    .body {
      width: 100%;
      flex: 1;
      height: 0;
	  min-height:200rpx;
    }
    // .footer {
    //   padding: 30rpx;
    // }
  }
}
</style>
